<template>
  <div class="bg-black analysis-modal" id="analysis-modal">
    <div class="bg-content analyse-content">
      <h5 class="title fc-909399 fs14">
        <span class>{{scoreDetails.correctScoreSum}}</span>分
      </h5>
      <p class="fs12 lh17 fc-909399">
        <i class="fs12 lh17 fc909399">总分</i>
        <span class="fs14" id="total_points">{{scoreDetails.allScore[0].sum}}</span>分
      </p>
      <p>
        <i class="fs12 lh17">本次考试耗时</i>
        <span id="mins">{{useTime}}</span>
      </p>
      <!--<i class="icon icon-close"></i>-->
      <div class="ana-main">
        <div class="ana-head">
          <div class="ana-item">题型</div>
          <div class="ana-item">数量</div>
          <div class="ana-item">正确</div>
          <div class="ana-item">错误</div>
        </div>
        <div class="ana-body">
          <div class="ana-tr">
            <div>单选</div>
            <div
              id="singleCounts"
            >{{(scoreDetails.singleCounts)}}</div>
            <div class="correct-num">{{scoreDetails.singleCorrectCounts}}</div>
            <div
              class="error-num"
            >{{(scoreDetails.singleCounts)-scoreDetails.singleCorrectCounts}}</div>
          </div>
          <div class="ana-tr">
            <div>多选</div>
            <div
              id="multipleCounts"
            >{{(scoreDetails.multipleCounts)}}</div>
            <div class="correct-num">{{scoreDetails.multipleCorrectCounts}}</div>
            <div
              class="error-num"
            >{{(scoreDetails.multipleCounts)-scoreDetails.multipleCorrectCounts}}</div>
          </div>
          <div class="ana-tr">
            <div>不定项</div>
            <div
              id="askCounts"
            >{{(scoreDetails.undefinedCounts)}}</div>
            <div class="correct-num">{{scoreDetails.undefinedCorrectCounts}}</div>
            <div
              class="error-num"
            >{{(scoreDetails.undefinedCounts)-scoreDetails.undefinedCorrectCounts}}</div>
          </div>
          <div class="ana-tr">
            <div>判断</div>
            <div
              id="checkCounts"
            >{{(scoreDetails.checkCounts)}}</div>
            <div class="correct-num">{{scoreDetails.checkCorrectCounts}}</div>
            <div
              class="error-num"
            >{{(scoreDetails.checkCounts)-scoreDetails.checkCorrectCounts}}</div>
          </div>
          <div class="ana-tr">
            <div>填空</div>
            <div
              id="gapleCounts"
            >{{(scoreDetails.gapleCounts)}}</div>
            <div class="correct-num">{{scoreDetails.gapleCorrectCounts}}</div>
            <div
              class="error-num"
            >{{(scoreDetails.gapleCounts)-scoreDetails.gapleCorrectCounts}}</div>
          </div>
        </div>
      </div>
      <p class="fs12 lh17 fc909399">简答题无法判断对错，按正确计分</p>
      <div class="bg-btn">
        <button class="bg-submit fs14 lh20 fc-fff" @click="show_answer">查看解析</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //分数详情
    scoreDetails: {
      type: Object,
      default: () => {}
    },
    // 所用时间
    useTime: {
      type: String,
      default: "00:00:00"
    }
  },
  data() {
    return {
      score_details: {}
    };
  },
  methods: {
    //查看解析
    show_answer() {
      this.$emit("show-answer");
    }
  }
};
</script>
<style scoped lang="scss">
.bg-black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.bg-content {
  width: 2.96rem;
  height: 2.96rem;
  background: #ffffff;
  border-radius: 0.04rem;
  padding: 0.2rem;
  position: relative;

  .title {
    text-align: center;
  }

  .bg-btn {
    margin-top: 0.2rem;
    width: 100%;
    display: flex;
    justify-content: center;

    .bg-submit {
      width: 2rem;
      height: 0.36rem;
      background: url("../../assets/images/btn-bg-blue@3x.png") no-repeat
        center/cover;
      background-size: 2.3rem 0.9rem;
      border: none;
    }
  }
}

/*查看解析弹框*/
.analyse-content {
  height: auto;
  padding: 0.2rem 0;

  h5.title {
    font-weight: normal;
    margin-bottom: 0.1rem;

    span {
      color: #0486fe;
      font-size: 0.48rem;
      font-weight: bold;
    }
  }

  p {
    text-align: center;
    margin-top: 0.02rem;

    > span {
      color: #f56c6c;
      margin-left: 0.04rem;
    }
  }

  .ana-main {
    margin-top: 0.12rem;
    border-top: #ebeef5 solid 0.01rem;
    border-bottom: #ebeef5 solid 0.01rem;
    padding: 0.2rem 0.1rem 0.1rem 0.4rem;

    .ana-head,
    .ana-tr {
      display: flex;
      align-items: center;
    }

    .ana-item,
    .ana-tr div {
      flex: 0 0 25%;
      font-size: 0.14rem;
      line-height: 0.2rem;
    }

    .ana-item {
      color: #909399;
      font-size: 0.14rem;
      margin-bottom: 0.1rem;
      line-height: 0.2rem;
    }

    .ana-tr {
      color: #000000;
      font-size: 0.14rem;
    }

    .ana-tr div {
      margin-bottom: 0.1rem;
    }

    .ana-tr div.error-num {
      color: #f56c6c;
    }

    .analyse-content .bg-btn {
      margin-top: 0.2rem;
    }
  }
}
</style>





